<template>
    <div class="info">
        <div class="info-box-prant">
          <div class="info-box">
            <div class="info-tabs">
                <div  v-for="(item,index) in tabs" :key="index" class="info-item" :class="index==current?'on':''" @click="changeTabs(index,item)">{{ item.name}}</div>
            </div>
            <div class="info-route" v-if="!screenFlag">
                <span class="info-name" @click="toPage('Home')">首页</span>
                <span class="info-arrows">></span>
                <span class="info-name">看看资讯</span>
            </div>
          </div>
        </div>

        <div class="info-content">
            <div class="info-nape flex flex-ac" v-for="(item,index) in results" :key="index" @click="toPage('LookDetails',{id: item.id,tid: current,page: page},item)">
                <div class="info-date" v-if="!screenFlag">
                    <div>
                        <div class="info-date-day">{{ item.create_time_day }}</div>
                        <div  class="info-date-year">{{ item.create_time_year_month }}</div>
                        <span class="info-arrow_right"></span>
                    </div>
                </div>
                <div class="info-line" v-if="!screenFlag"></div>
                <div class="info-details">
                    <div class="info-title" :class="screenFlag?'nowrap2':'nowrap'">{{ item.title}}</div>
                    <div class="flex flex-ac" v-if="!screenFlag">
                        <img class="info-eye" src="@/assets/img/information/eye.png" alt="" />
                        <span class="info-num">{{ item.view_count }}</span>
                    </div>
                    <div class="info-introduce nowrap2" v-html="item.info"></div>
                </div>
                <img class="info-img" :src="$imgUrl(item.image)" alt="" />
            </div>
            <div class="info-footer flex flex-ac jc-ct"  v-if="total>0&&screenFlag">
                <div class="flex flex-ac">
                    <div class="info-footer-prev flex flex-ac jc-ct" :class="page==1?'disabled':''" @click="prev">上一页</div>
                    <div class="info-footer-next flex flex-ac jc-ct" :class="hasNext?'':'disabled'" @click="next">下一页</div>
                </div>
            </div>
           <div class="info-footer flex flex-ac jc-sb" v-if="total>0&&!screenFlag">
               <div class="info-footer-total">共{{ total }}条</div>
               <el-pagination
                size="small"
                background
                v-model:current-page="page"
                v-model:page-size="limit"
                :page-sizes="[10, 20, 30, 40]"
                layout="prev, pager, next , sizes"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
               />
           </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getArticleCategory, getArticleList} from '@/api/index.js'
const props = defineProps({
  screenFlag: {
    type: Boolean,
    default: false
  }
})
const router = useRouter()
const tabs = ref([]);
const results = ref([]);
const current = ref(0);
const total = ref(0);
const page = ref(1);
const limit = ref(10);
const hasNext = ref(true);
const category_id = ref();


//tab切换
const changeTabs = (index,item) =>{
    current.value = index;
    category_id.value = item.id
    total.value = 0;
    hasNext.value = true;
    page.value = 1;
    getArticleLists();
}

//路由跳转
const toPage = (name,params,data) =>{
    if (name == 'LookDetails' && data.type && data.type == 2) {
        window.open(data.src, '_blank');
        return
    }
    router.push({ name ,query: params})
}

//菜单
const getArticleCategorys = (id) =>{
    getArticleCategory({page: 1, page_size: 20}).then(res => {
        tabs.value = res.data.list;
        let index = current.value || 0;
        category_id.value = res.data.list[index].id
        if(category_id.value){
            getArticleLists();
        }
    })
}

//列表
const getArticleLists = () =>{
    let params ={
        page: page.value,
        page_size: limit.value,
        category_id: category_id.value
    }
    getArticleList(params).then(res => {
        const data = res.data;
        results.value = data.list;
        total.value = data.count;
        hasNext.value = page.value * limit.value < total.value;
    })
}

// 上一页
const prev = () =>{
    if(page.value > 1){
        page.value --;
        getArticleLists();
    }
}

//下一页
const next = () =>{
    if(hasNext.value){
        page.value ++;
        getArticleLists();
    }
}

// 每页数
const handleSizeChange = (index) =>{
    limit.value = index;
    getArticleLists();
}

//页码切换
const handleCurrentChange = (index) =>{
    page.value = index;
    getArticleLists();
}

//挂载
onMounted(() => {
    let id = localStorage.getItem('consult-tid');
    let index = localStorage.getItem('consult-page');
    if(id){
        current.value = Number(id)
    }
    if(index){
        page.value = Number(index)
    }
    localStorage.setItem('consult-tid','')
    localStorage.setItem('consult-page','')
    getArticleCategorys();
})
</script>

<style scoped lang="less">
@import './index.less';
</style>
